<template>
  <div>
    <breadcrumb></breadcrumb>
    <!-- 分割线 -->
    <el-divider content-position="left">修改商品</el-divider>
    <userForm :rows= form :protype="2" @operation="operation"></userForm>
  </div>
</template>

<script>
import breadcrumb from "../components/breadcrumb.vue";
import userForm from "./components/userForm.vue";
import httpApi from '@/http';
export default {
    components: { breadcrumb,userForm},
      data(){
          return{
              id:this.$route.params.id,
              // 表单内容
              form:{
                uid: this.$route.params.id,
                user_type:'',
                uname:'',
                upwd:'',
                phone:'',
                user_name:'',
                email: '',
                qq:'',
                birthday: '',
            },
          }
      },
      methods: {
        //子组件传递的事件在标签上接收之后可以在methods中直接调用
        //并可以拿到子组件的传递的参数index和rows
        operation(rows) {
          // console.log(rows,'值')
          httpApi.userApi.queryUserById(rows).then(res=>{
            //  console.log(res,'添加');
            if(res.data.code === 200 && res.data.message === 'ok'){
              this.$message({
                message: '恭喜你，修改用户成功',
                type: 'success'
              });
              this.$router.push('/home/user-list')
            }else{
              this.$message({
                showClose: true,
                message: '修改用户失败',
                type: 'error'
              });
            }
          })
        },
        // 回填
        detailslist(){
          httpApi.userApi.queryUserDetailsById({uid:this.id}).then(res =>{
                  console.log("详情",res);
                  this.form.uname = res.data.results[0].uname
                  this.form.user_type = res.data.results[0].user_type
                  this.form.upwd = res.data.results[0].upwd
                  this.form.phone = res.data.results[0].phone
                  this.form.user_name =  res.data.results[0].user_name
                  this.form.email =  res.data.results[0].email  
                  this.form.qq = res.data.results[0].qq  
                  this.form.birthday = res.data.results[0].birthday   
              })

          },
      },

      mounted(){
        this.detailslist()
      },
}
</script>

<style lang="scss" scoped>
// .el-form-item {

// display: inline-block !important;

// }
</style>